<template>
  <div :id="videoUrl" class="player-box"></div>
</template>

<script>
export default {
  name: 'EasyPlayerPro',
  data () {
    return {
      playerDivId: '',
      // 播放器实例
      playerInfo: null,
      // 是否正在播放
      isPlay: false,
      initialConfig: {},
      // 分屏选项
      radioList: [
        { label: "单分屏", value: 1 },
        { label: "四分屏", value: 4 },
        { label: "九分屏", value: 9 }
      ],
      // 当前选中的分屏
      selectedScreen: 1,
      // 播放器配置
      config: {
        hasAudio: true,
        isLive: true,
        MSE: false,
        WCS: false,
        ...this.initialConfig
      }
    }
  },
  props: ["videoUrl"],
  beforeMount () {
    console.log('渲染前->EasyWebRTC', this.videoUrl);
    this.$emit('sendMessage', this.message);
  },
  mounted () {
    this.playCreate()
    this.onPlayer()
  },
  beforeUnmount () {
    this.onDestroy()
  },
  methods: {
    // 配置切换
    onUse (type) {
      if (type === 'hasAudio') {
        this.config.hasAudio = !this.config.hasAudio
      } else {
        this.config.MSE = false
        this.config.WCS = false
        if (type === 'MSE') this.config.MSE = true
        if (type === 'WCS') this.config.WCS = true
      }

      if (this.isPlay) {
        this.onDestroy().then(() => {
          this.playCreate()
          this.onPlayer()
        })
      }
    },

    // 设置全屏
    setFullscreen () {
      this.playerInfo?.setFullscreen(true)
    },

    // 暂停播放
    onPause () {
      this.playerInfo?.pause()
    },

    // 设置静音
    onMute () {
      this.playerInfo?.setMute(true)
    },

    // 开始播放
    onPlayer () {
      if (!this.playerInfo) return

      this.isPlay = true
      this.playerInfo.play(this.videoUrl)
        .then(() => {
          this.$emit('play-started')
        })
        .catch((e) => {
          console.error('播放失败:', e)
          this.$emit('play-error', e)
        })
    },

    // 切换到回放模式
    onPlayerPlayback () {
      this.onDestroy().then(() => {
        this.config.isLive = false
        this.playCreate()

        if (this.playerInfo) {
          this.playerInfo.play(this.videoUrl)
            .catch((e) => {
              console.error('回放失败:', e)
              this.$emit('playback-error', e)
            })
        }
      })
    },

    // 停止播放
    onStop () {
      this.isPlay = false
      this.onDestroy().then(() => {
        this.playCreate()
      })
    },

    // 销毁播放器实例
    onDestroy () {
      return new Promise((resolve) => {
        if (this.playerInfo) {
          this.playerInfo.destroy()
          this.playerInfo = null
        }
        setTimeout(resolve, 100)
      })
    },

    // 重新播放
    onReplay () {
      this.onDestroy().then(() => {
        this.playCreate()
        this.onPlayer()
      })
    },

    // 创建播放器实例
    playCreate () {
      const container = document.getElementById(`${this.videoUrl}`)
      if (!container) return

      const easyplayer = new EasyPlayerPro(container, {
        isLive: this.config.isLive,
        bufferTime: 0.2,
        stretch: false,
        MSE: this.config.MSE,
        WCS: this.config.WCS,
        hasAudio: this.config.hasAudio,
        watermark: {
          text: { content: 'easyplayer-pro' },
          right: 10,
          top: 10
        }
      })

      // 事件监听
      easyplayer.on("fullscreen", (flag) => {
        this.$emit('fullscreen-change', flag)
      })

      easyplayer.on('playbackRate', (rate) => {
        easyplayer.setRate(rate)
        this.$emit('rate-change', rate)
      })

      easyplayer.on('playbackSeek', (data) => {
        this.$emit('seek', data)
      })

      this.playerInfo = easyplayer
    }
  }
}
</script>

<style scoped>
.player-box {
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  margin-bottom: 20px;
}

.controls {
  padding: 15px;
  background: #f5f5f5;
  border-radius: 4px;
}

.screen-select,
.button-group,
.config-options {
  margin-bottom: 15px;
}

.screen-select label,
.config-options label {
  margin-right: 15px;
}

.button-group button {
  margin-right: 10px;
  padding: 5px 15px;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.button-group button:disabled {
  background: #cccccc;
  cursor: not-allowed;
}

.button-group button:hover:not(:disabled) {
  background: #45a049;
}
</style>
